<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>通过id设置图形样式</title>
    <link rel="stylesheet" href="https://minedata.cn/nce-static/support/demo/js-api/zh/css/demo.css" />
    <link rel="stylesheet" href="https://minedata.cn/nce-static/support/demo/js-api/zh/css/iconfont/iconfont.css" />
    <script src="https://minedata.cn/nce-static/support/demo/js-api/zh/js/demo.js"></script>
    <!-- 引入MineMap API插件 -->
    <link rel="stylesheet" href="https://minedata.cn/minemapapi/v2.1.1/minemap.css" />
    <link rel="stylesheet" href="https://minedata.cn/minemapapi/minemap-plugins/edit/minemap-edit.css" />
    <script src="https://minedata.cn/minemapapi/v2.1.1/minemap.js"></script>
    <script src="https://minedata.cn/minemapapi/minemap-plugins/edit/minemap-edit.js"></script>
    <style>
      #map {
          width: 100%;
          height: 100%;
      }

      .edit-ctrl-group {
          position: absolute;
          z-index: 300;
          top: 10px;
          right: 10px;
          width: 32px;
          overflow: hidden;
      }

      .edit-btn {
          width: 30px;
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          vertical-align: middle;
          text-align: center;
          cursor: pointer;
          color: #111;
          background-color: white;
          border: 1px solid #ddd;
      }

      .edit-btn:hover {
          background-color: #efefef;
      }

      .style-list {
          background-color: rgba(255, 255, 255, 0.8);
      }

      .style-list .style-inner {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;
          font-size: 12px;
          vertical-align: middle;
      }

      .style-list input {
          height: 24px;
          width: 90px;
          border: 1px solid #ddd;
          padding-left: 2px;
          box-sizing: border-box;
      }

      .card-panel {
          width: 175px;
      }

      .card-btn-group {
          padding-top: 2px;
      }

      .demo-btn {
          width: 100%;
      }
    </style>
  </head>

  <body>
    <div class="card-panel card-panel-top-left">
      <div class="card-item">
        <div class="style-list">
          <div class="style-inner">
            <div>面颜色</div>
            <input type="color" name="fillColor" value="#6777FF" onchange="onStyleItemChange(this)" />
          </div>
          <div class="style-inner">
            <div>面不透明度</div>
            <input type="number" name="fillOpacity" value="0.1" max="1" min="0" onchange="onStyleItemChange(this)" />
          </div>
          <div class="style-inner">
            <div>面轮廓颜色</div>
            <input type="color" name="fillOutlineColor" value="#6777FF" onchange="onStyleItemChange(this)" />
          </div>
          <div class="style-inner">
            <div>面轮廓宽度</div>
            <input type="number" name="fillOutlineWidth" value="2" min="0" onchange="onStyleItemChange(this)" />
          </div>
          <div class="style-inner">
            <div>线颜色</div>
            <input type="color" name="lineColor" value="#6777FF" onchange="onStyleItemChange(this)" />
          </div>
          <div class="style-inner">
            <div>线宽度</div>
            <input type="number" name="lineWidth" value="2" min="0" onchange="onStyleItemChange(this)" />
          </div>
          <div class="style-inner">
            <div>点边框颜色</div>
            <input type="color" name="circleBorderColor" value="#ffffff" onchange="onStyleItemChange(this)" />
          </div>
          <div class="style-inner">
            <div>点边框宽度</div>
            <input type="number" name="circleBorderRadius" value="2" min="0" onchange="onStyleItemChange(this)" />
          </div>
          <div class="style-inner">
            <div>点颜色</div>
            <input type="color" name="circleColor" value="#6777FF" onchange="onStyleItemChange(this)" />
          </div>
          <div class="style-inner">
            <div>点半径</div>
            <input type="number" name="circleRadius" value="4" min="0" onchange="onStyleItemChange(this)" />
          </div>
        </div>
      </div>
      <div class="card-btn-group" style="justify-content: space-around; flex-direction: column">
        <button onclick="onSetCustomStyleClick()" class="demo-btn">通过ids设置以上样式</button>
        <!-- <button onclick="onCloseCustomStyleClick()" class="demo-btn">恢复默认样式</button> -->
      </div>
    </div>
    <div id="map">
      <div class="edit-ctrl-group">
        <div class="edit-btn" title="画线" onclick="onEditBtnClick('line')"><span class="iconfont icon-draw-line" /></div>
        <div class="edit-btn" title="画圆弧" onclick="onEditBtnClick('arc')"><span class="iconfont icon-draw-curve" /></div>
        <div class="edit-btn" title="画多边形" onclick="onEditBtnClick('polygon')">
          <span class="iconfont icon-draw-polygon1" />
        </div>
        <div class="edit-btn" title="画矩形" onclick="onEditBtnClick('rectangle')">
          <span class="iconfont icon-draw-square" />
        </div>
        <div class="edit-btn" title="画三角形" onclick="onEditBtnClick('triangle')"><span class="iconfont icon-Triangle" /></div>
        <div class="edit-btn" title="画圆" onclick="onEditBtnClick('circle')"><span class="iconfont icon-draw-circle" /></div>
        <div class="edit-btn" title="删除所选" onclick="onEditBtnClick('trash')"><span class="iconfont icon-tool-delete" /></div>
      </div>
    </div>
    <script>
      /* minemap-edit api文档访问地址'https://minedata.cn/minemapapi/minemap-plugins/edit/edit-api.html' */

      /**
       * 全局参数设置
       */
      minemap.domainUrl = 'https://minedata.cn';
      minemap.dataDomainUrl = 'https://minedata.cn';
      minemap.serverDomainUrl = 'https://ol-data.minedata.cn';
      minemap.spriteUrl = 'https://minedata.cn/minemapapi/v2.1.1/sprite/sprite';
      minemap.serviceUrl = 'https://service.minedata.cn/service';

      minemap.key = '<您的 key>';
      minemap.solution = 11001;

      var map = new minemap.Map({
          container: 'map',
          style: 'https://service.minedata.cn/map/solu/style/11001',
          center: [116.46, 39.92],
          zoom: 14,
          pitch: 0,
          maxZoom: 17,
          minZoom: 3,
          projection: 'MERCATOR'
      });

      var edit

      function onEditBtnClick(mode) {
          if (edit && mode) {
              edit.onBtnCtrlActive(mode);
          }
      }

      var ids = [];
      map.on('load', function () {

          edit = new minemap.edit.init(map, {
              boxSelect: true,
              touchEnabled: true,
              displayControlsDefault: true,
              showButtons: false
          });

          //向编辑池增加数据
          var center = map.getCenter();
          ids = edit.setFeatures({
              type: 'FeatureCollection',
              features: [{
                  type: 'Feature',
                  properties: {},
                  geometry: { type: 'Point', coordinates: [center.lng + 0.003, center.lat + 0.002] }
              }, {
                  type: 'Feature',
                  properties: {},
                  geometry: {
                      type: 'LineString',
                      coordinates: [[center.lng - 0.005, center.lat + 0.005], [center.lng - 0.005, center.lat - 0.005]]
                  }
              }, {
                  type: 'Feature',
                  properties: {},
                  geometry: {
                      type: 'Polygon',
                      coordinates: [[[center.lng, center.lat], [center.lng, center.lat + 0.003], [center.lng - 0.003, center.lat + 0.003], [center.lng - 0.003, center.lat], [center.lng, center.lat]]]
                  }
              }]
          });
      });

      var styleOptions = { "custom_style": 'true' };

      function onStyleItemChange(e) {
          var name = e.name;
          var v = e.value;
          if (isNaN(parseFloat(e.value))) {
              v = e.value;
          } else {
              v = parseFloat(e.value);
          }
          styleOptions[name] = v;
      }

      function onSetCustomStyleClick() {
          var datas = edit.draw.getAll();
          ids = [];
          datas.features.forEach(function (feature) {
              ids.push(feature.id);
          });
          // styleOptions需要默认有属性 "custom_style": 'true' 才可以进行自定义的样式
          edit.setFeaturePropertiesByIds(ids, styleOptions);
          // styleOptions = {"custom_style": 'true'};
      }

      // function onCloseCustomStyleClick() {
      //     styleOptions = {};
      //     edit.cancelCustomStyle();
      // }

      function onEditRecordCreate(e) {
          e.record
      }

      // 绑定编辑操作记录新增事件
      map.on("edit.record.create", onEditRecordCreate);

      window.onerror = function (errorMessage, scriptURI, lineNumber, columnNumber, errorObj) {
          if (scriptURI.indexOf('minemap-edit') > -1) {
              message.error(errorObj.message);
          }
      };
    </script>
  </body>
</html>
